<template>
  <div class="content">
    <div class="header">
      <img src=""
           alt="">
      <span> {{shopName.name}} </span>
    </div>
    <ul>
      <li v-for="(item,index) in orderD"
          :key="index">
        <p> {{item.name}} </p>
        <div class="num_pri">
          <span class="num">× {{item.num}}</span>
          <span class="pri">￥{{item.price}}</span>
        </div>
      </li>
    </ul>

    <div class="foodBox">
      <p>餐盒</p>
      <p>￥111</p>
    </div>
    <div class="tfee">
      <p>配送费</p>
      <p>￥5</p>
    </div>
    <div class="totlePri">
      <p>订单￥ {{waitPay}} </p>
      <span>待支付￥ {{waitPay}} </span>
    </div>

  </div>
</template>

<script>
export default {
  name: 'Ordercon',
  data: function () {
    return {
      orderD: JSON.parse(localStorage.getItem('settlement')),
      shopName: JSON.parse(localStorage.getItem('shop')),
      waitPay: JSON.parse(localStorage.getItem('totalprice')) + 111 + 5
    }
  },
}
</script>

<style lang="less">
.content {
  background-color: white;
  padding: 0 15px 10px;
  box-sizing: border-box;
  margin-bottom: 10px;
  .header {
    padding: 15px 0;
    border-bottom: 0.1px solid #f5f5f5;
    span {
      font-size: 18px;
      color: #333;
    }
  }
  ul {
    padding-top: 15px;
    li {
      display: flex;
      justify-content: space-between;
      align-items: center;
      p {
        font-size: 16px;
        color: #666;
      }
      .num_pri {
        .num {
          font-size: 15px;
          color: #f60;
          margin-right: 50px;
        }
        .pri {
          font-size: 15px;
          color: #666;
        }
      }
    }
  }

  .foodBox,
  .tfee {
    display: flex;
    justify-content: space-between;
    align-items: center;
    p {
      font-size: 15px;
      color: #666;
      padding: 10px 0;
      box-sizing: border-box;
    }
  }
  .tfee {
    border-bottom: 0.1px solid #f5f5f5;
  }

  .totlePri {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0 0;

    p {
      font-size: 15px;
      color: #666;
    }
    span {
      font-size: 15px;
      color: #ff6600;
    }
  }
}
</style>